<template>
    <JessibucaVideo v-if="src.flv || src?.flvHd" v-bind="props" :src="hd ? src.flvHd || src.flv : src.flv || src.flvHd" ref="playerRef"></JessibucaVideo>
    <HLSVideo v-else-if="src?.hls || src?.hlsHd" v-bind="props" :src="hd ? src.hlsHd || src.hls : src.hls || src.hlsHd" ref="playerRef"></HLSVideo>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VideoSource } from './api';
import HLSVideo from './HLSVideo.vue';
import JessibucaVideo from './JessibucaVideo.vue';
const props = defineProps<{
    src: VideoSource,
    hd?: boolean,
    controls?: boolean,
    muted?: boolean,
    title?: string
}>()

const playerRef = ref<InstanceType<typeof JessibucaVideo> | InstanceType<typeof HLSVideo>>()

defineExpose({
    play: () => playerRef.value?.play(),
    stop: () => playerRef.value?.stop(),
})
</script>

<style scoped>
    
</style>